3
3
.
.
3
3
.
.
2
2
T
T
r
r
a
a
n
n
s
s
i
i
t
t
i
i
o
o
n
n
s
s
I
I
n
n
f
f
o
o
[
[
R
R
]
]
[
[
R
R
]
]
[
[
R
R
]
]
[
[
R
R
]
]
Transition is animation with which View is added or removed from the view Hierarchy (defined by .transition modifier).
If no transition is defined View is instantly added or removed.
For Transition to take affect you need to
● define Transition for the View
● define Animation for the View (defines additional parameters like speed & duration & must be defined)
● add or remove View from the Hierarchy
Syntax Example
.transition(AnyTransition.slide)
Content
Basic Examples
No Transition
With Transition
Assign Animation to Transition
Implicit Animation
Explicit Animation
Animation associated with Transition
Change @State Variable to Activate Transition using
Button
.onAppear
.onTapGesture
N
N
o
o
T
T
r
r
a
a
n
n
s
s
i
i
t
t
i
i
o
o
n
n
Here we create two Views
● Button View which switches value of State Variable show between false and true every time we press it
● Image View which is
○ added to the Screen when State Variable show = true
○ removed from the Screen when State Variable show = false
In this example no Transition is applied to the Image View.
This means that Image View will suddenly appear or disappear when added or removed from the Screen.
No Transition
struct ContentView: View {
@State private var show = false
var body: some View {
VStack {
Button("BUTTON") { self.show.toggle() }
if (show) { Image("Table").resizable().frame(width: 200, height: 200) }
}
}
}
Initially Image is not shown Image is shown after pressing the Button
W
W
i
i
t
t
h
h
T
T
r
r
a
a
n
n
s
s
i
i
t
t
i
i
o
o
n
n
Here we add Sliding Transition to the Image View.
This means that when Image is added to the Screen it will not just suddenly appear at its position.
After pressing the Button Image appears on the left and starts its Animation toward the center of the Screen.
And when we remove it, it will disappear from the Screen by sliding to the right .
With Transition
struct ContentView: View {
@State private var show = true
var body: some View {
VStack {
Button("BUTTON") { self.show.toggle() }
if (show) {
Image("Table").resizable().frame(width: 200, height: 200)
.transition(AnyTransition.slide)
.animation(.default)
}
}
}
}
Initially Image is not shown After pressing the Button Image appears on the left
Then it slides into position at the center of the Screen Image leaves the Screen by sliding to the right
Image is removed from the Screen
I
I
m
m
p
p
l
l
i
i
c
c
i
i
t
t
A
A
n
n
i
i
m
m
a
a
t
t
i
i
o
o
n
n
[
[
R
R
]
]
Transition can use implicit Animation that is associated with the View as highlighted in yellow.
This Animation is then used for both Transition and when View Property changes.
● TRANSITION Button adds/removes Text from Hierarchy which triggers Transition which uses the same Animation
● ANIMATION Button changes Text offset which uses the same Animation
ContentView.swift
import SwiftUI
struct ContentView: View {
@State private var show = false
@State private var offset:CGFloat = 0
var body: some View {
VStack {
Button(action:{ self.show.toggle() }) { Text("TRANSITION") }
Button(action:{ self.offset = self.offset + 50 }) { Text("ANIMATION") }
if (show) {
Text("TEXT")
.offset(x: offset)
.transition(AnyTransition.slide)
.animation(.default)
}
}
}
}
Initially Text is not shown Pressing TRANSITION Button Text is added to the Screen
Pressing ANIMATION Button Text is moved to the left
E
E
x
x
p
p
l
l
i
i
c
c
i
i
t
t
A
A
n
n
i
i
m
m
a
a
t
t
i
i
o
o
n
n
[
[
R
R
]
]
Transition can use explicit Animation that is associated with the Code Block that changes @State Variable that cause View
to be added or removed from Hierarchy.
ContentView.swift
struct ContentView: View {
@State private var show = false
var body: some View {
VStack {
Button("TRANSITION") {
withAnimation(Animation.easeInOut(duration: 3.0)) {
self.show.toggle()
}
}
if (show) {
Text("TEXT")
.transition(AnyTransition.slide)
}
}
}
}
Initially Text is not shown Pressing TRANSITION Button Text is added to the Screen
A
A
n
n
i
i
m
m
a
a
t
t
i
i
o
o
n
n
a
a
s
s
s
s
o
o
c
c
i
i
a
a
t
t
e
e
d
d
w
w
i
i
t
t
h
h
T
T
r
r
a
a
n
n
s
s
i
i
t
t
i
i
o
o
n
n
[
[
R
R
]
]
Transition can use Animation that is explicitly associated only with that Transition.
This Animation will not be applied when View's Properties change.
ContentView.swift
struct ContentView: View {
@State private var show = false
var body: some View {
VStack {
Button("TRANSITION") { self.show.toggle() }
if (show) {
Text("TEXT")
.transition(AnyTransition.opacity.animation(.easeInOut(duration: 1.0)))
}
}
}
}
B
B
u
u
t
t
t
t
o
o
n
n
In this example we change @State Variable show inside the Button in order to trigger Transition.
No Transition
struct ContentView: View {
@State private var show = false
var body: some View {
VStack {
Button("BUTTON") { self.show.toggle() }
if (show) {
Image("Table").resizable().frame(width: 200, height: 200)
.transition(AnyTransition.slide)
.animation(.default)
}
}
}
}
Initially Image is not shown After pressing the Button Image appears on the left
Then it slides into position at the center of the Screen Image leaves the Screen by sliding to the right
Image is removed from the Screen
.
.
o
o
n
n
A
A
p
p
p
p
e
e
a
a
r
r
In this example we change @State Variable show inside .onAppear Modifier which executes when Text View is drawn.
No Transition
struct ContentView: View {
@State private var show = false
var body: some View {
VStack {
Text("Hello")
.onAppear{ self.show = true}
if (show) {
Image("Table").resizable().frame(width: 200, height: 200)
.transition(AnyTransition.slide)
.animation(.default)
}
}
}
}
On start Image immediately appears on the left side Then it slides into position at the center of the Screen
On Button pressed Image leaves Screen by sliding right Image is removed fro the Screen
.
.
o
o
n
n
T
T
a
a
p
p
G
G
e
e
s
s
t
t
u
u
r
r
e
e
In this example we change @State Variable show inside .onTapGesture Modifier.
No Transition
struct ContentView: View {
@State private var show = false
var body: some View {
VStack {
Text("Hello")
.onTapGesture{ self.show.toggle()}
if (show) {
Image("Table").resizable().frame(width: 200, height: 200)
.transition(AnyTransition.slide)
.animation(.default)
}
}
}
}
Initially Image is not visible When we Tap on Text it slides into position
